<template>
	<view class="login">
		<!-- 登录页面 -->
		<!-- 头像 -->
		<view class="Headportrait">
			<image src="../../static/icons/logo..png" mode=""></image>
		</view>
		<!-- 表单区域 -->
		<view class="zhanghao">
			<view class="picon">
				<image src="../../static/icons/shipin.png" mode=""></image>
			</view>
			<input type="text" name="username" v-model="username" @click="asd" placeholder="请输入电话号码/邮箱" />
		</view>
		<view class="zhanghao">
			<view class="picon">
				<image src="../../static/icons/home.png" mode=""></image>
			</view>
			<input type="password" name="password" v-model="password" placeholder="请输入密码" />
		</view>
		<!-- 按钮 -->
		<button type="default" class="butt" @tap="denglu">登录</button>
		<!-- 海外手机/忘记面膜 -->
		<view class="forget">
			<view>
				海外手机号码登录
			</view>
			<view @click="gouforderPassword">
				忘记密码 ?
			</view>
		</view>
		<!-- 立即注册 -->
		<view class="register" @tap="gouRegister">
			立 即 注 册
		</view>
		<!-- 第三方授权 -->
		<view class="Authorization">
			第三方软件登录
		</view>
		<!-- 第三方软件 -->
		<view class="software">
			<image src="../../static/icons/QQ.png" mode=""></image>
			<image src="../../static/icons/微信.png" mode=""></image>
			<image src="../../static/icons/微博.png" mode=""></image>

		</view>
	</view>
</template>

<script>
	import {
		loginInput
	} from '@/api/login/login.js'
	export default {
		data() {
			return {
				password: '123456',
				username: '13177778888'
			};
		},
		methods: {
			// 上传登录数据
			async denglu() {
				console.log(this.username)
				const result = await loginInput({
					"password": this.password,
					"username": this.username,
				})
				console.log(result)
				if (result.data.success) {
					// 页面提示
					uni.showToast({
						title: "登录成功"
					})
					// 根据返回值，登录成功  存储信息
					uni.setStorageSync("token", result.data.data.token)
					// 设置一个延时
					setTimeout(() => {
						// uni.reLaunch(OBJECT)
						// 返回上一个页面
						uni.reLaunch({
							url:'/pages/my/my'
						})
					}, 2000)

				} else{
					uni.showToast({
						title:"登录失败，请重新登录",
						icon:'error'
					})
				}
			},
			// 跳转注册页面
			gouRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			asd(){
				// 点击就清空输入框的内容
				this.username=''
			},
			// 跳转忘记密码页面
			gouforderPassword(){
				uni.navigateTo({
					url:"/pages/forgetPassword/forgetPassword"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.login {
		width: 100%;
		height: 100vh;
		background-color: #f4e8ab;
		padding: 154rpx 106rpx 0;
		box-sizing: border-box;

		// 大头像
		.Headportrait {
			width: 212rpx;
			height: 212rpx;
			margin: 0 auto 50rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 表单输入区域
		.zhanghao {
			width: 100%;
			height: 76rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 40rpx;
			background-color: #dadcdb;

			.picon {
				width: 32rpx;
				height: 32rpx;
				margin: 0 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 大按钮
		.butt {
			color: #fff;
			;
			background-color: #354E44;
			margin-bottom: 30rpx;
		}

		// 海外手机/忘记面膜
		.forget {
			font-size: 24rpx;
			color: #8d8d8d;
			display: flex;
			justify-content: space-between;
			margin-bottom: 150rpx;
		}

		// 立即注册
		.register {
			width: 100%;
			text-align: center;
			color: #354E44;
			font-size: 40rpx;
			font-weight: 700;
			margin-bottom: 30rpx;
		}

		// 第三方授权
		.Authorization {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			margin-bottom: 20rpx;
			color: #8d8d8d;
		}

		// 第三方软件
		.software {
			width: 100%;
			height: 64rpx;
			display: flex;
			justify-content: space-evenly;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>
